<template>
	<!-- 租赁发票组件 -->
	<view class="sampleorderlist">
		<view class="btn add" @click="add_card()">
			<!-- 点击添加-->
			<uni-icons type="plusempty" size="13" color="#fff"></uni-icons>
			添加
		</view>
		<view class="btn editor" @click="add_card(card_id)">
			<!-- 点击编辑-->
			<uni-icons type="compose" size="13" color="#fff"></uni-icons>
			编辑
		</view>
		<!-- 卡片列表 -->
		<view class="card_list clearfix">
			<uni-card v-for="(item) in card_arr" :key="item.id">
				<checkbox @click="checkbox_change(item.id)" :checked="item.checked" /> <!-- 复选框-->
				<view class="ul">
					<view class="li">
						<text class="title">单据日期:</text>
						<view class="value">{{ item.FDate || "" }}</view>
					</view>
					<view class="li">
						<text class="title">单据编码:</text>
						<view class="value">{{ item.FBillNo || "" }}</view>
					</view>
					<view class="li">
						<text class="title">销售范围:</text>
						<view class="value">{{ item.FAreaPS || "" }}</view>
					</view>
					<view class="li">
						<text class="title">销售方式:</text>
						<view class="value">{{ item.FSaleStyle || "" }}</view>
					</view>
					<view class="li">
						<text class="title">购货单位:</text>
						<view class="value">{{ item.Consumer || "" }}</view>
					</view>
					<!-- <view class="li">
						<text class="title">币别:</text>
						<view class="value">{{ item.Currency || "" }}</view>
					</view>
					<view class="li">
						<text class="title">汇率:</text>
						<view class="value">{{ item.FExchangeRate || "" }}</view>
					</view> -->
					<view class="li">
						<text class="title">审核状态:</text>
						<view class="value audit_status_1" :class="{ audit_status_2: item.check_status == 0 }">
							{{ item.check_status == 1 ? "审核通过" : "未审核" }}
						</view>
					</view>
					<view class="li">
						<text class="title">创建时间:</text>
						<view class="value">{{ new Date().toLocaleString(item.createtime) || "" }}</view>
					</view>
				</view>
			</uni-card>
			<!-- 卡片列表为空时显示的盒子 -->
			<view class="empty" v-show="card_arr.length == 0">列表为空</view>
		</view>
	</view>
</template>

<script>
	// 引入uni-ui组件
	import {
		uniIcons,
		uniCard
	} from "@dcloudio/uni-ui"

	export default {
		data() {
			return {
				card_id: '',
				card_arr: [],
				currentPage: 1,
				totalPage: 0,
			}
		},
		components: {
			uniIcons, //uni-ui的icons组件
			uniCard, //uni-ui的卡片组件
		},
		methods: {
			// 卡片的选择框点击事件
			checkbox_change(id) {
				this.card_arr.forEach((card_arr) => {
					if (card_arr.id === id) {
						card_arr.checked = !card_arr.checked
						if (card_arr.checked == true) {
							this.card_id = card_arr.id
						}
					} else card_arr.checked = false
				})
				this.card_arr.forEach((card_arr) => {
					if (card_arr.checked === false) {
						this.card_id = ''
						return
					}
				})
				this.card_arr.forEach((card_arr) => {
					if (card_arr.checked === true) {
						this.card_id = card_arr.id
					}
				})
				// console.log(this.card_arr);
			},
			// 添加卡片事件
			add_card(id) {
				// 跳转到 新增提货通知单组件
				console.log(id);
				if (id == '') {
					uni.showToast({
						title: '请选择一项进行修改',
						icon: "none"
					})
					return
				}
				if (id == undefined) {
					uni.navigateTo({
						url: '/pages/sampleorder/addsampleorder'
					});
				} else {
					uni.navigateTo({
						url: '/pages/sampleorder/addsampleorder?id=' + id
					});
				}
			},
			// 删除卡片事件
			delete_card() {
				// 判断是否存在选中的卡片，没有则跳出
				var isAllChecked = this.card_arr.every(ele => ele.checked == false)
				if (isAllChecked) {
					uni.showToast({
						title: '请选择一项进行删除',
						icon: "none"
					})
					return
				}
				// 确定取消提示框
				uni.showModal({
					title: "是否确定删除", //消息框标题
					success: (res) => { //接口调用成功的回调
						if (res.confirm) { //用户选择确定
							this.$Api.invoicedelete(this.card_id).then(res => {
								console.log(res);
								if (res.data.code == 1) {
									// this.card_arr = this.card_arr.filter(ele => {
									// 	return ele.checked == false;
									// })
									var pages = getCurrentPages();
									var currPage = pages[pages.length - 1]
									currPage.$vm.currentPage = 1
									currPage.$vm.getinvoicelist()
								}
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
							})
						}
					},
				})
			},
			//获取列表
			getlist() {
				this.$Api.getsample_list(this.currentPage).then(res => {
					console.log(res)
					if (res.data.code == 1) {
						var array = res.data.data.list
						console.log(array);
						for (var i = 0; i < array.length; i++) {
							array[i].checked = false
						}
						if (this.currentPage == 1) {
							this.card_arr = array;
						} else {
							this.card_arr = this.card_arr.concat(array);
						}
						this.totalPage = res.data.data.total
						uni.stopPullDownRefresh()
					} else {
						this.card_arr = []
					}
				})
			},
		},
		mounted() {
			this.getlist()
		},
		onReachBottom() {
			this.currentPage++;
			if (this.currentPage > this.totalPage) {
				uni.hideNavigationBarLoading();
				uni.showToast({
					title: '暂无更多数据',
					icon: 'none'
				})
			} else {
				this.getlist()
				console.log('到底了');
			}
		},
	}
</script>

<style lang="less">
	.sampleorderlist {
		padding: 0 10rpx;

		>.btn {
			display: inline-block;
			padding: 16rpx 20rpx;
			margin-top: 30rpx;
			margin-left: 10rpx;
			border-radius: 6rpx;
			font-size: 26rpx;
			color: #fff;

			>.uni-icons {
				//uni-ui的icon图标样式
				margin-right: 5rpx;
				font-weight: bolder;
			}
		}

		>.add {
			background: #18bc9c;

			&:active {
				background: #128F76;
			}
		}

		>.editor {
			background: #999;
		}

		>.delete {
			background: #F75444;

			&:active {
				background: #FA9086;
			}
		}

		>.card_list {
			padding: 0 10rpx;
			padding-top: 30rpx;

			>.uni-card {
				//uni-ui卡片组件的类名
				margin: 30rpx 10rpx !important;
				position: relative;

				.ul {
					>.li {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx 0;

						>.title {
							width: 98px;
						}

						>.value {
							min-height: 68rpx;
							width: 68%;
							padding-left: 20rpx;
							border: 1px solid #e5e5e5;
							border-radius: 4px;
							line-height: 68rpx;
							word-break: break-word;
							padding-right: 5px;
						}

						>.audit_status_1 {
							color: #18bc9c;
							font-weight: bold;
						}

						>.audit_status_2 {
							color: #aaa;
							font-weight: bold;
						}
					}
				}
			}

			>.empty {
				margin-top: 40rpx;
				color: #999;
				text-align: center;
				font-size: 36rpx;
			}
		}
	}
</style>
